<template>
  <div class="base-form">
    <form-row v-for="(item, index) in formList" :key="index" :label="item.label">
      <Input v-if="item.type === 'input'" v-model.trim="formData[item.model]" class="ipt" clearable/>
      <Select v-if="item.type === 'select'" v-model="formData[item.model]" class="ipt" clearable>
        <Option v-for="item1 in item.options" :value="item1.value" :key="item1.label">{{ item1.label }}</Option>
      </Select>
      <div v-if="item.slot">
        <slot :name='item.slot'></slot>
      </div>
    </form-row>
    <div class="footer">
      <Button type="success" class="btn-save" @click="search">查询</Button>
      <Button type="ghost" class="btn-reset" @click="close">重置</Button>
    </div>
  </div>
</template>

<script>
import FormRow from '@/components/formRow'
export default {
  name: 'baseFrom',
  props: {
    formList: {
      type: Array,
      default() {
        return []
      },
    },
  },
  components: {
    FormRow,
  },
  data() {
    return {
      formData: {},
    }
  },
  methods: {
    search() {
      this.$emit('search', this.formData)
    },
    close() {
      this.formData = {}
      this.$emit('search', {},true)
    },
  },
}
</script>

<style lang="less" scoped>
.base-form {
  display: flex;
  justify-content: flex-start;
  // overflow: hidden;
  // align-items: center;
  .footer {
    margin-left: 28px;
  }
  .ipt{
    width: 224px;
  }
  
  .btn-save {
    width: 80px;
    height: 30px;
    background: #85c989;
    box-shadow: 0px 2px 2px 0px #448247, 0px 0px 1px 0px #b4ffb9;
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0px 1px 1px #163124, 0px 3px 5px #bcffca;
    margin-right: 11px;
    border: none;
  }
  .btn-reset {
    width: 80px;
    height: 30px;
    background: #ffffff;
    box-shadow: 0px 4px 4px 0px #baecbd, 0px 1px 5px 1px #e6ffe7;
    font-size: 14px;
    font-weight: bold;
    color: #66bc7a;
    line-height: 22px;
    text-shadow: 0px 3px 5px #bcffca;
    border: none;
  }
}
</style>
